<template>
  <div class="app-container">
    <!-- 订单信息 -->
    <el-card class="box-card " shadow="hover" >
      <div slot="header" class="clearfix">
        <div class="media-display" style=" display: flex;justify-content: space-between;align-items: baseline">
          <div>
            <el-link :underline="false" style="font-size: 20px;margin-right: 20px">订单详情</el-link>

            <el-tag style="cursor: pointer;width: 60px;text-align: center"
                    :type="orderInfo.orderState === 0 ? 'primary': (orderInfo.orderState === 1 ? 'success' : 'danger')">
              <span>{{ orderInfo.orderState | orderFilter}}</span>
            </el-tag>
          </div>

          <el-button type="primary" @click="toOrder" icon="el-icon-back" circle></el-button>
        </div>
      </div>
      <div class="clearfix">
        <el-table
          row-class-name="row-class"
          show-overflow-tooltip="true"
          :data="orderInfo.historyCartVoList"
          :fit="true"
          tooltip-effect="dark">
          <el-table-column
            type="index"
            width="50">
          </el-table-column>
          <el-table-column
            label="图片">
            <template slot-scope="scope">
              <img style="cursor: pointer"
                   :src="prefix + scope.row.specsImg" width="80" height="80" alt="商品图片">
            </template>
          </el-table-column>
          <el-table-column
            prop="name"
            label="商品名称"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            prop="productSpecs"
            label="规格"
            show-overflow-tooltip>
            <template slot-scope="scope">
              {{ scope.row.productSpecs | parseSpecs }}
            </template>
          </el-table-column>
          <el-table-column
            prop="price"
            label="单价"
            class-name="label-center">
          </el-table-column>
          <el-table-column
            prop="total"
            label="数量"
            class-name="label-center">
          </el-table-column>
          <el-table-column
            prop="totalPrice"
            label="小计">
            <template slot-scope="scope">
              {{ scope.row.price * scope.row.total }}
            </template>
          </el-table-column>
        </el-table>
      </div>
    </el-card>

    <!-- 地址信息 -->
    <el-card class="box-card " shadow="hover" style="margin: 20px 0">
      <div slot="header" class="clearfix">
        <el-link :underline="false" style="font-size: 20px">订单地址</el-link>
      </div>
      <div class="text" v-if="orderInfo.orderState === 1">
        <table style="width: 100%;table-layout: fixed">
          <tr>
            <td>
              <el-link :underline="false">姓名:</el-link>
              <el-link :underline="false">{{ address.name }}</el-link>
            </td>
            <td>
              <el-link :underline="false">手机号:</el-link>
              <el-link :underline="false">{{ address.phone }}</el-link>
            </td>
            <td>
              <el-link :underline="false">地址名称:</el-link>
              <el-link :underline="false">{{ address.addressName }}</el-link>
            </td>
            <td>
              <el-link :underline="false">地址:</el-link>
              <el-link :underline="false">{{ address.province }}</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" style="font-size: 20px">{{ address.city }}</el-link>
              <el-divider direction="vertical"></el-divider>
              <el-link :underline="false" style="font-size: 20px">{{ address.region }}</el-link>
            </td>
            <td>
              <el-link :underline="false">地址类型:</el-link>
              <el-link :underline="false" style="font-size: 20px">
                <el-tag size="small">{{ address.tag | tagToValue}}</el-tag>
              </el-link>
            </td>
          </tr>
          <tr>
            <el-link :underline="false">详细地址:</el-link>
            <el-link :underline="false" style="font-size: 20px">{{ address.detailAddress }}</el-link>
          </tr>
          <tr>
            <el-link :underline="false">备注:</el-link>
            <el-link :underline="false" style="font-size: 20px">{{ address.describe ? address.describe : '暂无' }}</el-link>
          </tr>
        </table>
      </div>
      <div class="text" v-else>
        <el-link :underline="false">订单没有支付成功，没有地址信息</el-link>
      </div>

    </el-card>
  </div>
</template>

<script>
  import { getOrderInfoByIdReq } from "@/api/order";
  import settings from '@/settings'

  export default {
    name: "userOrderDetail",
    data() {
      return {
        prefix : settings.prefix || 'https://mall-resource-bucket.oss-cn-hangzhou.aliyuncs.com',// 全局前缀
        userId: '',
        orderId: '',// orderId
        address: {},// 地址
        orderInfo: {},// 订单信息
      }
    },
    methods: {
      toOrder(){// 返回订单列表
        this.$router.push(`/order/userOrder/${this.userId}`)
      },
      getOrderInfoById(){// 初始化调用
        getOrderInfoByIdReq({orderId: this.orderId}).then(response => {
          console.log(response)
          if (response.state === true) {
            this.orderInfo = response.data.orderInfo//产品信息
            this.address = response.data.address//地址信息
            console.log(response.data.address)
            this.$notify.success({title: '成功',message: response.message, duration: 1500});
          }else{
            this.$notify.warning({title: '失败',message: response.message, duration: 1500});
          }
        })
      },
      eventBlur(event){
        if(event.nodeName === 'SPAN' || event.nodeName === 'I')event = event.parentNode;event.blur();
      },
    },
    computed: {
/*      totalCount(){
        return this.productList.length
      },
      totalPrice(){
        let sum = 0;
        this.productList.forEach((item)=>{
          sum += (item.price * item.total)
        })
        return sum;
      }*/
    },
    filters: {
      parseSpecs(specs){
        let specsObj = JSON.parse(specs);
        let str = "";
        Object.keys(specsObj).forEach((key)=>{
          //console.log(specsObj[key])
          str += specsObj[key] + " "
        })
        return str
      },
      tagToValue(tag){
        switch (tag) {
          case 1 : return "家"
          case 2 : return "学校"
          case 3 : return "公司"
          case 4 : return "其他"
          default : return "其他"
        }
      },
      orderFilter(orderState){
        switch (orderState) {
          case 0 : return "未支付";
          case 1 : return "已支付";
          case 2 : return "已取消";
        }
      },
    },
    beforeMount(){
      this.userId = this.$route.params.userId;
      this.orderId = this.$route.params.orderId
      this.getOrderInfoById()
    },
    mounted(){
    },
  }
</script>

<style scoped>
  .shopping-cart-wrap{
    width: 70vw;
    margin: 0 auto;
  }
  >>>.el-input__inner{
    text-align: center;
  }

  >>>.label-center{
    text-align: center;
  }
  >>>.row-class{
    height: 60px;
    font-size: 20px;
  }

  .settlement{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: baseline;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .text .el-link{
    font-size: 20px;
  }


</style>
